<template>
  <div class="home">
    <h1>Micro Frontend App</h1>
    <p>This is the micro frontend application</p>
    
    <div class="button-demo">
      <h2>Button Demo</h2>
      <div class="button-group">
        <ux-button type="primary">Primary Button</ux-button>
        <ux-button type="success">Success Button</ux-button>
        <ux-button type="warning">Warning Button</ux-button>
        <ux-button type="danger">Danger Button</ux-button>
        <ux-button type="info">Info Button</ux-button>
      </div>
      
      <div class="button-group">
        <ux-button size="large">Large Button</ux-button>
        <ux-button>Default Button</ux-button>
        <ux-button size="small">Small Button</ux-button>
      </div>
      
      <div class="button-group">
        <ux-button disabled>Disabled Button</ux-button>
        <ux-button type="primary" disabled>Disabled Primary</ux-button>
      </div>
    </div>

    <div class="modal-demo">
      <h2>Modal Demo</h2>
      <div class="button-group">
        <ux-button type="primary" @click="openBasicModal">Open Basic Modal</ux-button>
        <ux-button type="success" @click="openNestedModal">Open Nested Modal</ux-button>
      </div>

      <!-- 基础弹窗 -->
      <ux-modal
        v-model:visible="basicModalVisible"
        title="基础弹窗示例"
        width="60%"
        :loading="loading"
        @register="registerBasicModal"
        @ok="handleBasicModalOk"
      >
        <div class="modal-content">
          <p>这是一个基础弹窗示例，展示了如何在应用中使用ux-element库的Modal组件。</p>
          <p>Modal组件特点：</p>
          <ul>
            <li>支持全屏切换</li>
            <li>自定义底部按钮</li>
            <li>支持加载状态</li>
            <li>提供钩子函数控制</li>
          </ul>
        </div>
      </ux-modal>

      <!-- 嵌套弹窗-外层 -->
      <ux-modal
        v-model:visible="outerModalVisible"
        title="外层弹窗"
        width="70%"
        :loading="outerLoading"
        @register="registerOuterModal"
        @ok="handleOuterModalOk"
      >
        <div class="modal-content">
          <p>这是外层弹窗，你可以在此打开一个内层弹窗</p>
          <ux-button type="primary" @click="openInnerModal">打开内层弹窗</ux-button>
        </div>
      </ux-modal>

      <!-- 嵌套弹窗-内层 -->
      <ux-modal
        v-model:visible="innerModalVisible"
        title="内层弹窗"
        width="50%"
        :loading="innerLoading"
        @register="registerInnerModal"
        @ok="handleInnerModalOk"
      >
        <div class="modal-content">
          <p>这是内层弹窗，演示了弹窗的嵌套使用</p>
        </div>
      </ux-modal>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useModal } from '@monorepo-project/ux-element'

// 基础弹窗
const basicModalVisible = ref(false)
const loading = ref(false)
const [registerBasicModal, { openModal: openBasicModal, closeModal: closeBasicModal }] = useModal()

// 嵌套弹窗-外层
const outerModalVisible = ref(false)
const outerLoading = ref(false)
const [registerOuterModal, { openModal: openOuterModal, closeModal: closeOuterModal }] = useModal()

// 嵌套弹窗-内层
const innerModalVisible = ref(false)
const innerLoading = ref(false)
const [registerInnerModal, { openModal: openInnerModal, closeModal: closeInnerModal }] = useModal()

// 打开嵌套弹窗
function openNestedModal() {
  openOuterModal()
}

// 基础弹窗确认
async function handleBasicModalOk() {
  loading.value = true
  try {
    // 模拟异步操作
    await new Promise(resolve => setTimeout(resolve, 1000))
    console.log('基础弹窗确认按钮点击')
  } finally {
    loading.value = false
  }
}

// 外层弹窗确认
async function handleOuterModalOk() {
  outerLoading.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
    console.log('外层弹窗确认按钮点击')
  } finally {
    outerLoading.value = false
  }
}

// 内层弹窗确认
async function handleInnerModalOk() {
  innerLoading.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
    console.log('内层弹窗确认按钮点击')
    // 关闭内层弹窗
    closeInnerModal()
  } finally {
    innerLoading.value = false
  }
}
</script>

<style scoped>
.home {
  padding: 20px;
  text-align: center;
}

.button-demo, .modal-demo {
  margin-top: 30px;
}

.button-group {
  margin: 20px 0;
}

.button-group .ux-button {
  margin: 0 10px;
}

.modal-content {
  text-align: left;
  padding: 10px;
}

.modal-content ul {
  margin-left: 20px;
}
</style> 